<template>
  <view class="course-page">
    <!-- 导航栏组件 -->
    <NavBar title="修改密码"></NavBar>
    <view class="content" :style="getContentStyle()">
      <view class="content-wrapper">
        <view class="input-wrapper">
          <input class="input-field" placeholder="请输入旧密码" placeholder-style="color: #CCCCCC; font-size: 16px;" :password="passwordHidden1" v-model="commitData.oldPass" />
          <!-- 显示/隐藏密码图标 -->
          <image class="toggle-password-icon" :src="passwordVisibleIcon1" mode="aspectFit" @click="togglePasswordVisibility(1)"></image>
        </view>
        <view class="input-wrapper">
          <input class="input-field" placeholder="请输入新密码" placeholder-style="color: #CCCCCC; font-size: 16px;" :password="passwordHidden2" v-model="commitData.newPass" />
          <!-- 显示/隐藏密码图标 -->
          <image class="toggle-password-icon" :src="passwordVisibleIcon2" mode="aspectFit" @click="togglePasswordVisibility(2)"></image>
        </view>
        <view class="input-wrapper">
          <input class="input-field" placeholder="请输入再次输入新密码" placeholder-style="color: #CCCCCC; font-size: 16px;" :password="passwordHidden3" v-model="commitData.reNewPass" />
          <!-- 显示/隐藏密码图标 -->
          <image class="toggle-password-icon" :src="passwordVisibleIcon3" mode="aspectFit" @click="togglePasswordVisibility(3)"></image>
        </view>
        
        <!-- 登录按钮 -->
        <view class="login-button" @click="handleLogin">
          <text class="login-button-text">修改</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { changePassword } from '@/api/auth.js'

  export default {
    data() {
      return {
        commitData: {
          newPass: '',
          oldPass: '',
          reNewPass: '',
        },
        passwordHidden1: true, // 初始密码是隐藏的
        passwordHidden2: true, // 初始密码是隐藏的
        passwordHidden3: true, // 初始密码是隐藏的
        passwordVisibleIcon1: '/static/images/login-psw-hidden.png', // 初始显示隐藏图标
        passwordVisibleIcon2: '/static/images/login-psw-hidden.png', // 初始显示隐藏图标
        passwordVisibleIcon3: '/static/images/login-psw-hidden.png', // 初始显示隐藏图标
      }
    },
    methods: {
      getContentStyle() {
        const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
        return {
          height: `calc(100% - ${(statusBarHeight + 44)}px)`
        }
      },
      togglePasswordVisibility(index) {
        this['passwordHidden' + index] = !this['passwordHidden' + index];
        this['passwordVisibleIcon' + index] = this['passwordHidden' + index] 
          ? '/static/images/login-psw-hidden.png' 
          : '/static/images/login-psw-show.png';
      },
      handleLogin() {
        // 判断输入内容是否合法
        if (!this.commitData.oldPass || !this.commitData.newPass || !this.commitData.reNewPass) {
          uni.showToast({ title: '请输入完整信息', icon: 'none' })
          return
        }
        if (this.commitData.newPass !== this.commitData.reNewPass) {
          uni.showToast({ title: '两次输入的新密码不一致', icon: 'none' })
          return
        }
        // 请输入6-20长度
        if (this.commitData.newPass.length < 6 || this.commitData.newPass.length > 20) {
          uni.showToast({ title: '请输入6-20位英文、数字或符号', icon: 'none' })
          return
        }
        uni.showModal({
          title: '提示',
          content: '是否确认修改密码？',
          success: (res) => {
            if (res.confirm) {
              // 调用修改密码接口
              changePassword(this.commitData).then(res => {
                uni.showToast({ title: '修改密码成功', icon: 'success' })
                uni.setStorageSync('token', '')
                uni.setStorageSync('userInfo', '')
                uni.reLaunch({ url: '/pages/login/index' })
              })
            }
          }
        });
      }
    }
  }
</script>

<style lang="scss">
.course-page {
  width: 100%;
  height: 100vh;
  background: linear-gradient(207deg, #DCECFF 2%, #F6F7FB 61%);
}

.content-wrapper {
  width: 100%;
  height: calc(100vh - 632rpx);
  // background-color: #ffffff;
  border-top-left-radius: 48rpx;
  border-top-right-radius: 48rpx;
  padding-top: 96rpx;
  padding-left: 64rpx;
  padding-right: 64rpx;
  position: relative;
  z-index: 1;
}

.input-wrapper {
  width: 100%;
  height: 96rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #F7F7F7;
  border-radius: 24rpx;
  padding: 0 32rpx;
  margin-bottom: 40rpx;
  box-sizing: border-box;
}

.input-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
  display: block;
}

.input-field {
  flex: 1;
  font-size: 32rpx;
  color: #333333;
  background-color: transparent;
  border: none;
  outline: none;
  height: 100%;
  line-height: 1;
}

.toggle-password-icon {
  width: 48rpx;
  height: 48rpx;
  margin-left: 20rpx;
  flex-shrink: 0;
  display: block;
  cursor: pointer;
}

.login-button {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(270deg, #4677F4 0%, #7FA2FC 100%);
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
  cursor: pointer;
  margin-bottom: 40rpx;
}

.login-button-text {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
}
</style>
